<template>
  <div id="contentBody" class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">专业技术职务</h3>
        <div class="box-tools pull-right">
          <button type="button" v-if='isEditable' class="btn btn btn-success" @click="addVisible = true">
            <i class='fa fa-plus-square-o'>添加专业技术职务</i>
          </button>
        </div>
      </div>
      <div class="box-body">
        <section class="content" id="profTechs">
          <div class="row">
            <el-table :empty-text="emptyText" :highlight-current-row='true' :data="professionTechs" border style="width: 100%">
              <el-table-column type='index' label="序号" :width='80'></el-table-column>
              <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
              <el-table-column v-if='isEditable' label="操作" width="320">
                <template scope="scope">
                  <el-button type="success" @click="viewTech(scope.$index,scope.row)">
                    <i class="fa fa-eye">查看</i>
                  </el-button>
                  <el-button type="primary" v-if='userEditable' @click="editTech(scope.$index,scope.row)">
                    <i class="fa fa-edit">编辑</i>
                  </el-button>
                  <el-button type="warning" v-if='userEditable' @click="deleteTech(index)">
                    <i class="fa fa-trash">删除</i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </section>
      </div>

      <el-dialog title='专业技术职务' v-if="viewVisible" :before-close="()=>viewVisible = false" :modal="false" :visible.sync="viewVisible" size="small">
        <ProfessionForm ref="viewProfForm" :editable="false" :profession="editprofession"></ProfessionForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="viewVisible = false">关 闭</el-button>
        </span>
      </el-dialog>

      <el-dialog title='编辑专业技术职务' v-if="editVisible" :before-close="()=>editVisible = false" :modal="false" :visible.sync="editVisible" size="small">
        <ProfessionForm ref="editProfForm" :editable="true" :profession="editprofession"></ProfessionForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">关 闭</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog id='addProfessionTechDlg' v-if="addVisible" title="新增专业技术职务" :visible.sync="addVisible" :modal="false" size="small" :before-close="()=>addVisible = false" >
        <ProfessionForm ref="addProfForm" :editable="true"></ProfessionForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">关 闭</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import ProfessionForm from './ProfessionForm';
  import Utils from "../../../common/utils";
  let util = new Utils();
  export default {
    name: 'ProfessionTech',
    props: ['professionTechs', 'editable'],
    data: function() {
      return {
        defaultValue: new Date(),
        emptyText: '空',
        isEditable: true,
        viewVisible:false,
        addVisible:false,
        editVisible:false,
        columns: util.getProfTechColumns(),
        editprofession: {
          level: 1,
          positionlevel: 1,
          techcate: 1,
          name: '',
          obtaintime: '',
          employtime: '',
          employunit: '',
          employcert: '',
          comment: ''
        },
        userEditable:true,
        techcategorylist: [],
        levellist: [],
        positionlevels: this.$store.state.sysconfigs['positionlevels_2'],
      }
    },
    components: {
      ProfessionForm
    },
    created() {
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      this.techcategorylist = this.$store.state.sysconfigs.techcategorylist
      this.levellist = this.$store.state.sysconfigs.ptl
      this.userEditable = this.isEditable && util.hasRole(1)
    },
    methods: {
      clearEditData() {
        this.editprofession.level = 1,
          this.editprofession.techcate = 1,
          this.editprofession.name = '',
          this.editprofession.obtaintime = '',
          this.editprofession.employtime = '',
          this.editprofession.employunit = '',
          this.editprofession.employcert = '',
          this.editprofession.comment = ''
      },
      getname(cates, id) {
        for (var index in cates) {
          if (cates[index].id == id) {
            return cates[index].name;
          }
        }
        return ''
      },
      hasRole(val) {
        return util.hasRole(val)
      },
      deleteTech(index) {
        var that = this
        util.deleteConf(that,()=>{
            console.log("delete resume");
            that.professionTechs.splice(index, 1)
        })
      },
      viewTech(index,row) {
        this.editprofession = this.professionTechs[index]
        this.viewVisible = true
      },
      save(){
        var profession = this.$refs.editProfForm.getData()
        if(profession){
          this.editprofession = profession
        }
        this.editVisible = false
      },
      add(){
        var newProfession = this.$refs.addProfForm.getData()
        if(newProfession){
          this.professionTechs.push(newProfession)
          this.addVisible = false
        }
        else{
          return
        }
        
      },
      editTech(index,row){
        this.editprofession = this.professionTechs[index]
        this.editVisible = true
      }
    }
  }
</script>

<style scoped>
  #contentBody {
    min-height: 400px;
  }
</style>
